<template>
    <div class="gouwuchewrap">
        <div class="gouwuhds clearfix">
            <h1 class="fl">
                <a href="">
                    <span class="gwlogos"></span>
                </a>
            </h1>
            <div class="gwsearchwrap fr clearfix">
                <div class="gws-l fl clearfix">
                    <form action="">
                        <div class="tznavwrap fl">
                            <span class="xbmiao">天猫&nbsp; ∨</span>
                            <ul class="xblist">
                                <li><a href="" class="alist1">店铺</a></li>
                                <li><a href="" class="alist1">宝贝</a></li>
                            </ul>
                        </div>
                        <div class="xbswrap fl">
                            <input type="text" class="xbs1" autocomplete="off">
                        </div>
                    </form>
                </div>
                <div class="fl">
                    <button type="button" class="gwcbtns"></button>
                </div>
            </div>
        </div>
        <div class="cartwrap" v-if="a">
            <div class="carhd">
                <div class="carl fl">
                    <a href="">
                        <em>全部商品</em>
                        <span class="carnum">{{arr.length}}</span>
                    </a>
                </div>
                <div class="carr fr">
                    <span class="carpay">已选商品（不含运费）</span>
                    <strong class="carprice">
                        <em>
                           {{zsum}}
                        </em>
                    </strong>
                    <a href="" class="dinjiesuan jsuan">结&nbsp;算</a>
                </div>
            </div>
            <div class="diborwrap">
                    <div class="dibor"></div>
            </div>
            <div class="carlistw1">
                <div class="cartable">
                    <div class="cartl fl">
                       <div class="qxkw fl">
                            <i class="quanxuank" @click="quanxuan"></i>
                       </div>
                       <span class="qxw"> &nbsp;全选</span>
                    </div>
                     <div class="spxx1">
                            商品信息
                        </div>
                    <div class="cartr fr clearfix">
                        <div class="xtinfos fl">
                            <div class="xiangtong">&nbsp;</div>
                        </div>
                        <div class="dprices fl">
                            <div class="xiangtong">单价</div>
                        </div>
                        <div class="xtnum fl">
                            <div class="xiangtong">数量</div>
                        </div>
                        <div class="xtzong fl">
                            <div class="xiangtong">金额</div>
                        </div>
                        <div class="xtcaozuo fl">
                            <div class="xiangtong">操作</div>
                        </div>
                    </div>
                </div>
                <div class="zuihou">
                    <div class="m15 clearfix" v-for="(item,key) in arr" :key="key">
                        <!-- <div class="cardp clearffix">
                            <div class="shop-infos">
                                <div class="carboxs">
                                    <i class="quanxuank active"></i>
                                </div>
                                &nbsp;
                                <span class="shopb"></span>
                                店铺：
                                <a href="" class="cardpname">{{item}}</a>
                                <span class="carslogowrap"><a href="" class="carslogo"></a></span>
                            </div>
                        </div> -->
                        <div class="carzhen clearfix">
                            <ul>
                                <li class="tds chks">
                                    <div class="td-inner">
                                        <div class="td-check">
                                            <i class="xuandp" @click="danxuan(key)"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="tds td-item">
                                    <div class="td-inner">
                                        <div class="tdtx">
                                            <a href="" class="tdtxs">
                                                <img :src="'/img/'+item.yimg" alt="" class="cartx">
                                            </a>
                                        </div>
                                        <div class="cardpxxs">
                                            <div class="carbac">
                                                <a href="" class="cardptitle"><span v-for="(items,keys) in mswrap[key]" :key="keys">{{items}}</span></a>
                                            </div>
                                            <div class="ai">
                                                <div class="sss"></div>
                                                <div class="baozheng">
                                                    <span class="bzwrap" title="支持信用卡支付">
                                                        <img src="../assets/img/ys/bz1.png" alt="">
                                                    </span>
                                                    <a href="" class="bzwrap" title="消费者保障服务，卖家承诺7天退换">
                                                        <img src="../assets/img/ys/bz2.png" alt="">    
                                                    </a>
                                                    <a href=""  class="bzwrap" title="消费者保障服务，卖家承诺如实描述">
                                                        <img src="../assets/img/ys/bz3.png" alt="">
                                                    </a>
                                                </div>
                                                <div class="xxx"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="tds tdin1">
                                    <div class="itemcan">
                                        <p class="skuline">尺码：{{item.chima}}</p>
                                        <p class="skuline">颜色分类：{{item.yanse}}</p>
                                        <span class="edit" @click="xgyc(key,item)">修改</span>
                                        <div class="xiugaiss">
                                            <div class="ov">
                                                <div class="xgleft">
                                                    尺&nbsp;&nbsp;码：
                                                </div>
                                                <div class="xgright">
                                                    <ul>
                                                        <li class="xgli" v-for="(chi,cks) in chimaw" :key="cks" @click="xxg(key,cks)"><a href="javascript:;">{{chi}}</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="ov">
                                                 <div class="xgleft">
                                                     颜&nbsp;&nbsp;色：
                                                 </div>
                                                <div class="xgright">
                                                    <ul>
                                                        <li class="xgimg1" v-for="(tu,ck) in yansew" :key="ck" @click="xximg(key,ck)"><img :src="'/img/'+tu" alt=""></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="qqk">
                                                <span class="qr" @click="qr(key,item)">确认</span><span class="qx" @click="qx(key)">取消</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="tds gga">
                                    <div class="td-inner">
                                        <div class="td-prices">
                                            <em>￥<span class="zhenprice">{{item.money}}</span></em>
                                        </div>
                                    </div>
                                </li>
                                <li class="tds acont">
                                    <div class="td-inner">
                                        <div class="itemcont cleaarfix">
                                            <a href="javascript:;" class="jiantd" @click="downs(key)">-</a>
                                            <input type="text" class="jige" autocomplete="off" :value="item.shuliang">
                                            <a href="javascript:;" class="addtd" @click="adds(key)">+</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="tds td-sum">
                                    <div class="td-inner">
                                        <em>￥<span class="sums1">{{item.money*item.shuliang}}</span></em>
                                    </div>
                                </li>
                                <li class="tds td-op">
                                    <div class="td-inner">
                                        <a href="javascript:;" @click="yiru(key)">移入收藏夹</a><a href="javascript:;" @click="shanchu(key)">删除</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="zjswrap">
                        <div class="zjs">
                            <div class="haideitaoyiceng clearfix">
                                <div class="zuihoudequanxuan clearfix">
                                    <div class="carbb">
                                        <i class="zuihouqx" @click="quanxuan"></i>
                                    </div>
                                    &nbsp;全选
                                </div>
                                <div class="optis">
                                    <a href="">删除</a>
                                    <a href="">清除失效宝贝</a>
                                    <a href="">移入收藏夹</a>
                                    <a href="">分享</a>
                                </div>
                                <div class="jieshujieshu clearfix">
                                    <div class="jj1 fl">
                                        已选商品
                                        <em class="jxuan">{{shuliang}}</em>
                                        件
                                    </div>
                                    <div class="jj2 fl">
                                        <span class="txts">合计（不含运费）：&nbsp;</span>
                                        <strong class="j2s"><em class="jsum">{{zsum}}</em></strong>
                                    </div>
                                    <div class="jj3 fl">
                                        <a href="" class="jsuan"><span class="xiangtu">结&nbsp;算</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="meiyou">
            <div class="kong0">
                <h2>您的购物车还是空的，赶紧行动吧！您可以：</h2>
                <ul>
                    <li>
                        看看<a href="">我的收藏夹</a>
                    </li>
                    <li>看看<a href="">更多</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    methods:{
        qx(key){
            var sp=document.getElementsByClassName("xiugaiss")
            sp[key].style.display="none"
            this.bixuan=""
            this.chima=""
            this.yanse=""
        },
        qr(key,val){
            var rul={}
            if(!this.bixuan && !this.chima && !this.yanse){
                 this.$toast({
                    message:"请先选择颜色或尺码",
                    duration:2000
                })
                return false
            }
            if(!this.chima){
                rul.chima=val.chima
            }else{
                rul.chima=this.chima
            }
            if(!this.yanse){
                rul.yimg=val.yimg
                rul.yanse=val.yanse
            }else{
                rul.yimg=this.yanse
                rul.yanse=this.bixuan
            }
            axios.post("/api/xggouwu",{
                id:val.Id,
                rul:rul
            }).then((data)=>{
                if(data.data){
                    this.$toast({
                        message:"修改成功",
                        duration:2000
                    })
                    this.arr[key].yimg=rul.yimg
                    this.arr[key].yanse=rul.yanse
                    this.arr[key].chima=rul.chima
                     this.bixuan=""
                    this.chima=""
                    this.yanse=""
                }else{
                     this.$toast({
                        message:"修改失败",
                        duration:2000
                    })
                    return false
                }
            })
            var sp=document.getElementsByClassName("xiugaiss")
            sp[key].style.display="none"
        },
        xgyc(key,val){
            console.log(val)
            this.chimaw=""
            this.yansew=""
            this.bixuanw=""
            var sp=document.getElementsByClassName("xiugaiss")
            for(var i=0;i<sp.length;i++){
                sp[i].style.display="none"
            }
            sp[key].style.display="block"
            axios.post("/api/xxx",{id:val.sid}).then((data)=>{
                if(data.data){
                    this.chimaw=data.data[0].kexuan.split(',')
                    this.yansew=data.data[0].img.split(',')
                    this.bixuanw=data.data[0].bixuan.split(',')
                }else{

                }
            })
        },
        xximg(dval,val){
             let dawrap=document.getElementsByClassName("m15")[dval]
            let syduixiang=dawrap.querySelectorAll(".xgright .xgimg1")
            let bxduixiang=syduixiang[val]
            if(bxduixiang.className.indexOf("active")>-1){
                console.log("you")
            }else{
                for(var i=0;i<syduixiang.length;i++){
                    syduixiang[i].classList.remove("active")
                }
                bxduixiang.classList.add("active")
            }
            this.bixuan=this.bixuanw[val]
            this.yanse=this.yansew[val]
        },
        xxg(dval,val){
            let dawrap=document.getElementsByClassName("m15")[dval]
            let syduixiang=dawrap.querySelectorAll(".xgright .xgli")
            let bxduixiang=syduixiang[val]
            if(bxduixiang.className.indexOf("active")>-1){
                console.log("you")
            }else{
                for(var i=0;i<syduixiang.length;i++){
                    syduixiang[i].classList.remove("active")
                }
                bxduixiang.classList.add("active")
            }
            this.chima=this.chimaw[val]
        },
        shanchu(key){
            axios.post("/api/shanchugouwu",{sid:this.arr[key].sid,spid:this.arr[key].spid}).then((data)=>{
                if(data.data){
                    this.arr.splice(key,1)
                }else{
                    this.$toast({
                        message:"删除失败",
                        duration:2000
                    })
                    return false
                }
            })
        },
        yiru(key){
            axios.post("/api/scspin",{sid:this.arr[key].sid}).then((data)=>{
                if(data.data){
                    if(data.data=="youle"){
                        this.$toast({
                            message:"收藏夹已经存在，请勿重复收藏",
                            duration:2000
                        })
                    }else{
                        this.$toast({
                            message:"添加成功",
                            duration:2000
                        })
                    }
                     
                }else{
                     this.$toast({
                        message:"添加失败",
                        duration:2000
                    })
                }
            })
        },
        downs(key){
            var danpin=document.getElementsByClassName('xuandp')
           var jige=document.getElementsByClassName('jige')
            var sum=document.getElementsByClassName('sums1')
            if(jige[key].value==1){
                jige[key].value==1
            }else{
                jige[key].value--
                if(danpin[key].className.indexOf('active')>-1){
                    this.zsum=Number(this.zsum)-Number(this.arr[key].money)
                }
                
            }
            sum[key].innerHTML=jige[key].value*this.arr[key].money
        },
        adds(key){
            var danpin=document.getElementsByClassName('xuandp')
            var jige=document.getElementsByClassName('jige')
            var sum=document.getElementsByClassName('sums1')
            jige[key].value++
            sum[key].innerHTML=jige[key].value*this.arr[key].money
            if(danpin[key].className.indexOf('active')>-1){
                this.zsum=Number(this.arr[key].money)+Number(this.zsum)
            }
            
        },
        danxuan(key){
            var _this=this
            this.shuliang=0
            this.zsum=0
            var jsuan=document.getElementsByClassName('jsuan')
            var zong=document.getElementsByClassName('quanxuank')[0]
            var linzong=document.getElementsByClassName('zuihouqx')[0]
            var danpin=document.getElementsByClassName('xuandp')
            var sums=document.getElementsByClassName('sums1')
            if(danpin[key].className.indexOf('active')>-1){
                danpin[key].classList.remove('active')
            }else{
                danpin[key].classList.add('active')
            }
            var num=0
            for(var i=0;i<danpin.length;i++){
                if(danpin[i].className.indexOf('active')>-1){
                    num++
                    _this.shuliang++
                    _this.zsum=Number(_this.zsum)+Number(sums[i].innerHTML)
                }
            }
            console.log(danpin.length)
            if(num>0){
                 for(var j=0;j<jsuan.length;j++){
                    jsuan[j].classList.add('sbtn')
                }
            }else{
                 for(var j=0;j<jsuan.length;j++){
                    jsuan[j].classList.remove('sbtn')
                }
            }
            if(num==danpin.length){
                zong.classList.add('active')
                linzong.classList.add('active')
            }else{
                zong.classList.remove('active')
                linzong.classList.remove('active')
            }
        },
        quanxuan(){
            var jsuan=document.getElementsByClassName('jsuan')
            var zong=document.getElementsByClassName('quanxuank')[0]
            var linzong=document.getElementsByClassName('zuihouqx')[0]
            var xuandp=document.getElementsByClassName('xuandp')
            var sums=document.getElementsByClassName('sums1')
            if(zong.className.indexOf('active')>-1 || linzong.className.indexOf('active')>-1){
                zong.classList.remove('active')
                linzong.classList.remove('active')
                for(var i=0;i<xuandp.length;i++){
                    if(xuandp[i].className.indexOf('active')>-1){
                        xuandp[i].classList.remove('active')
                    }
                }
                this.zsum=0
                this.shuliang=0
                for(var j=0;j<jsuan.length;j++){
                    jsuan[j].classList.remove('sbtn')
                }
            }else{
                zong.classList.add('active')
                linzong.classList.add('active')
                for(var i=0;i<xuandp.length;i++){
                    if(xuandp[i].className.indexOf('active')>-1){

                    }else{
                        xuandp[i].classList.add('active')
                    }
                }
                for(var j=0;j<jsuan.length;j++){
                    jsuan[j].classList.add('sbtn')
                }
                var _this=this
                this.zsum=0
                for(var i=0;i<sums.length;i++){
                    _this.zsum=Number(_this.zsum)+Number(sums[i].innerHTML)
                }
                this.shuliang=this.arr.length
            }
        }
    },
    data(){
        return{
            zsum:0.00,
            shuliang:0,
            shu:1,
            a:true,
            arr:"",
            ms:"",
            mswrap:[],
            dgwrap:[],
            chimaw:"",
            yansew:"",
            bixuanw:"",
            yanse:"",
            chima:"",
            bixuan:""
        }
    },
    created(){
        axios.get('/api/').then((data)=>{
				if(data.data){

                }else{
                    this.$router.push("/login")
                }
            })
        axios.post("/api/chagouwuche").then((data)=>{
            console.log(data.data)
            if(data.data){
                var _this=this
                this.arr=data.data
                for(var i=0;i<this.arr.length;i++){
                    // var dange=1
                    // _this.dgwrap.push(dange)
                   _this.ms=_this.arr[i].miaoshu.split(',')
                   _this.mswrap.push(_this.ms)
                   _this.ms=""
                }
                // console.log(_this.dgwrap)
                // var spwrap=[data.data[0].spid]
                // for(var i=0;i<data.data.length;i++){
                //     if(data.data[0].spid!=data.data[i].spid){
                //     spwrap.push(data.data[i].spwrap)
                //     }
                // }
                // var newarr=[]
                // for(var i=0;i<spwrap.length;i++){
                //     for(var j=0;j<data.data.length;j++){
                //         if(spwrap[i]==data.data[j].spid){
                //             newarr[i].push(data.data[i])
                //         }
                //     }
                // }
                // console.log(newarr)
            }else{

            }
        })
    }
}
</script>

<style scoped>
.ov ul,.ov a,.ov img{
    overflow: hidden;
     padding: 0;
    margin: 0;
}
.qqk{
    text-align: center;
    margin-top: 10px;
}
.qr{
    cursor: pointer;
    display: inline-block;
    width: 55px;
    height: 21px;
    overflow: hidden;
    text-decoration: none;
    line-height: 21px;
    border: 1px solid #ff5704;
    color: #fff;
    border-radius: 2px;
    background: #f50;
    text-align: center;
    margin-right: 15px;
    font-size: 12px;
}
.qx{
    display: inline-block;
    width: 55px;
    height: 21px;
    overflow: hidden;
    text-decoration: none;
    line-height: 21px;
    text-align: center;
        color: #0b72a4;
        font-size: 12px;
        cursor: pointer;
}
.qx:hover{
    text-decoration: underline;
        color: #f60;
}
.xgli,.xgimg1{
    color: #343434;
    cursor: pointer;
    float: left;
    border: 1px solid #d1d1d1;
    background-color: #fff;
    line-height: 20px;
    margin: 0 7px 4px 0;
    position: relative;
    padding: 0;
}
.ov img{
    width: 32px;
    height: 30px;
    vertical-align: middle;
}
.ov li.active{
        border-color: #ff5704;
}
.xgli a{
    display: inline-block;
        padding: 0 9px;
    line-height: 18px;
    height: 18px;
    border: 1px solid #fff;
    white-space: nowrap;
    color: #343434;
    cursor: pointer;
    font-size: 12px;
}

.ov{
    overflow: hidden;
}
.xgleft{
    width: 70px;
    font-size: 12px;
    color: #A0A0A0;
    margin-bottom: 20px;
    float: left;
}
.xiugaiss{
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    width: 250px;
        border: 1px solid #d9d9d9;
        padding: 20px 10px;
    min-height: 140px;
    background: #fff;
    z-index: 999;
   
}
    *{
        box-sizing: content-box;
    }
    .carr .sbtn{
        color: #fff;
        background: #f40;
        cursor: pointer;
    }
    .jj3 .sbtn{
        color: #fff;
        background: #f40;
        cursor: pointer;
    }
    .kong0{
        padding: 88px 0 100px 156px;
        background: url("../assets/img/ys/kong0.png") no-repeat 40px 86px;
        position: relative;
    }
    .kong0 h2{
        font: 700 14px / 20px arial;
    }
    .kong0 ul{
            margin-top: 12px;
    line-height: 20px;
    }
    .kong0 li{
        margin-top: 7px;
    }
    .kong0 a{
        margin-left: 5px;
            color: #36C;
    }
    .kong0 a:hover{
            color: #f60;
            text-decoration: underline;
    }
    .gouwuchewrap{
        width: 1190px;
        margin: 0 auto;
    }
    .gouwuhds{
        padding: 20px 0 0;
        position: relative;
        height: 35px;
        margin-bottom: 60px;
    }
    .gouwuhds h1 a{
        display: inline-block;
        width: 140px;
        height: 35px;
        line-height: 35px;
        position: relative;
    }
    .gwlogos{
        position: absolute;
        display: block;
        overflow: hidden;
        left: 0;
        width: 173px;
        height: 80px;
        top: -15px;
        background: url("../assets/img/ys/gwlogo.png") no-repeat;
    }
    /* .gwsearchwrap{
        width: 515px;
    } */
    .gws-l{
        border:2px solid #f50;
        border-right: none;
        height: 35px;
    }
    .tznavwrap{
        position: relative;
        width: 74px;
        height: 35px;
        border-right: 1px solid #e5e5e5;
        border-left: 1px solid #f5f5f5;
    }
    .gwcbtns{
        height: 33px;
        width: 93px;
        background: url("../assets/img/ys/300.png") no-repeat;
        background-position: 0 -204px;
        border:2px solid #f50;
        padding-right: 0;
    }
    .xbmiao{
        display: block;
        text-align: center;
        line-height: 35px;
        width: 100%;
        height: 100%;
        color: #6b6b6b;
        font-weight: 400;
        font-size: 12px;
        background: #f5f5f5;
    }
    .xblist{
        display: none;
        position: absolute;
        top: 30px;
        left: -1px;
    }
    .alist1{
        display: block;
        width: 74px;
        height:35px;
        background: #fff;
        color: #6b6b6b;
        font-weight: 400;
        font-size: 12px;
        text-align: center;
        line-height: 35px;
        border-right: 1px solid #e5e5e5;
        border-left: 1px solid #f5f5f5;
    }
    .xbswrap{
        height: 35px;
        line-height: 35px;
    }
    .xbs1{
        outline: none;
        text-indent: 10px;
        margin:0 auto;
        width: 343px;
        font-size: 14px;
        height: 30px;
        border: none;
        background: #fff;
        color: #000;
    }
    .alist1:hover{
        background: #f5f5f5;
    }
    .carhd{
        overflow: hidden;
        font-size: 12px;
        position: relative;
    }
    .carl{
        font-weight: 700;
        font-size: 16px;
        height: 16px;
        text-align: center;
        padding: 0 0 15px 0;
        cursor: pointer;
        /* border-bottom: 2px solid #f40; */
    }
    .carl a{
        padding-left: 15px;
    }
    .carl em{
        color: #f40;
    }
    .carnum{
        color: #f40;
        font-size: 14px;
        margin: 0 30px 0 5px;
        font-weight: 400;
    }
    .carr{
        height: 25px;
        line-height: 25px
    }
    .carprice{
        font-family: Arial,Verdana;
        font-weight: 700;
        margin-right: 5px;
        color: #f40;
    }
    .carprice em{
        font-family: Verdana,Arial;
        padding-left: 2px;
        font-weight: 700;
        color: #f40;
    }
    .dinjiesuan{
        background: #aaa;
        color: #fff;
        cursor: not-allowed;
        width: 55px;
        display: inline-block;
        border-radius: 2px;
        text-align: center;
    }
    .diborwrap{
        background: #e6e6e6;
        height: 2px;
        position: relative;
    }
    .dibor{
        width: 132px;
        background: #f40;
        height: 2px;
    }
    .cartable{
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        color: #3c3c3c;
    }
    .cartl{
        width: 80px;
        cursor: pointer;
        /* font-size: 12px; */
        /* line-height: 50px; */
    }
    .quanxuank{
        display: inline-block;
        float: left;
        width: 15px;
        height: 15px;
        overflow: hidden;
        margin: -1px 0 0 15px;
        background:url("../assets/img/ys/600.png") no-repeat;
        background-position: 0 0;
        margin-top: auto;
        margin-bottom: auto;
    }
    .quanxuank.active{
        background-position: 0 -20px;
    }
    .qxkw{
        height: 50px;
        padding-top: 17.5px;
    }
    .qxw{
        display: inline-block;
        font-size: 12px;
        float: left;
    }
    .spxx1{
        float: left;
        padding-left: 91px;
        font-size: 12px;
    }
    .cartr>div{
        font-size: 12px;
    }
    .xiangtong{
        padding: 0 0 0 10px;
    }
    .xtinfos{
        width: 212px;
        padding-right: 40px;
    }
    .dprices{
        width: 130px;
    }
    .xtnum{
        width: 120px;
    }
    .xtzong{
        width: 140px;
    }
    .xtcaozuo{
        width: 119px;
        padding: 0 0 0 30px;
    }
    .m15{
        margin-bottom: 15px;
    }
    .cardp{
        position: relative;
        height: 38px;
        background: #fff;
        overflow: hidden;
    }
    .shop-infos{
        position: relative;
        z-index: 2;
        line-height: 38px;
        padding-left: 15px;
        font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    }
    .carboxs{
        position: relative;
        display: inline-block;
        width: 15px;
        height: 15px;
        overflow: hidden;
    }
    .carboxs i{
        margin: 0;
    }
    .shopb{
        width: 16px;
        height: 16px;
        display: inline-block;
        vertical-align: middle;
        margin: -3px 6px 0 0;
        background: url("../assets/img/ys/600.png") no-repeat;
                background-position: -20px -105px;
    }
    .cardpname{
            color: #3c3c3c;
    }
    .cardpname:hover{
        text-decoration: underline;
        color: #f40;
    }
    .carslogowrap{
            margin-left: 15px;
    }
    .carslogo{
        display: inline-block;
        vertical-align: text-bottom;
        width: 20px;
        height: 20px;
        background: url("../assets/img/ys/slogo.gif") ;
            background-position: -80px 0;
    }
    .carzhen{
        border: 1px solid #ccc;
    }
    .tds{
        float: left;
        min-height: 119px;
    }
    .td-inner{
        padding-top: 20px;
    }
    .chks{
        width: 50px;
        position: relative;
        overflow: hidden;
    }
    .td-check{
        margin: 0 10px 0 0;
        float: right;
        position: relative;
        display: inline-block;
        width: 15px;
        height: 15px;
        overflow: hidden;
    }
    .xuandp{
        position: relative;
        z-index: 1;
        float: left;
        width: 15px;
        height: 15px;
        background-position: 0 0;
        line-height: 200em;
        overflow: hidden;
        cursor: pointer;
        background: url("../assets/img/ys/600.png") no-repeat;

    }
    .xuandp.active{
        background-position: 0 -20px;
    }
    .tdtx{
        width: 80px;
        height: 80px;
        border: 1px solid #eee;
        float: left;
        overflow: hidden;
    }
    .tdtxs{
        display: table-cell;
        width: 80px;
        height: 80px;
        vertical-align: middle;
        text-align: center;
    }
    .cartx{
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }
    .cardpxxs{
        margin: -3px 0 0 91px;
        padding-right: 25px;
    }
    .carbac{
        min-height: 40px;
    }
    .cardptitle{
        font-size: 12px;
        display: block;
        max-height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
        color: #3c3c3c;
    }
    .cardptitle:hover{
        text-decoration: underline;
        color: #f40;
    }
    .td-item{
        width: 342px;
    }
    .sss{
        overflow: hidden;
        min-height: 26px;
    }
    .xxx{
        padding-bottom: 20px;
        color: #FE0036;
    }
    .baozheng{
        margin-bottom: 3px;
    }
    .bzwrap{
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .itemcan{
        padding: 16px 0;
        min-height: 84px;
        border: 1px dashed transparent;
        position: relative;
    }
    .itemcan:hover{
        border-color: #f60;
    }
    .skuline{
        font-size: 12px;
        margin: 0 5px 0 15px;
        color: #9c9c9c;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .edit{
        position: absolute;
        right: -1px;
        top: -1px;
        color: #fff;
        cursor: pointer;
        background: #f60;
        padding: 2px 4px 0;
        height: 16px;
        line-height: 1;
        font-size: 12px;
    }
    .td-prices{
        padding: 2px 0 0 10px;
        line-height: 1;
        width: 74px;
    }
    .td-prices em{
        color: #3c3c3c;
        font-weight: 700;
        font-family: Verdana,Tahoma,arial;
        /* padding-bottom: 4px; */
    }
    .tdin1{
        width: 212px;
        padding-right: 40px;
    }
    .gga{
        width: 130px;
    }
    .acont{
        width: 120px;
    }
    .itemcont{
        height: 25px;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    .itemcont a{
        display: block;
        height: 23px;
        width: 17px;
        border: 1px solid #e5e5e5;
        background: #f0f0f0;
        text-align: center;
        line-height: 23px;
        color: #444;
        position: absolute;
        float: left;
    }
    .jige{
        width: 39px;
        height: 15px;
        line-height: 15px;
        border: 1px solid #aaa;
        color: rgb(60, 60, 60);
        text-align: center;
        padding: 4px 0;
        background-color: #fff;
        background-position: -75px -375px;
        position: absolute;
        z-index: 2;
        left: 18px;
        top: 0;
        float: left;
    }
    .addtd{
        left: 60px;
    }
    .td-sum{
        width: 140px;
    }
    .td-sum em{
        color: #f40;
        font-weight: 700;
    }
    .td-op{
        font-size: 12px;
        padding: 0 0 0 30px;
    }
    .td-op a{
       padding-bottom: 3px;
           color: #3c3c3c;
           display: block;
    }
    .td-op a:hover{
        text-decoration: underline;
        color: #f40;
    }
    .zjswrap{
        position: relative;
        height: 50px;
    }
    .zjs{
        width: 1190px;
        margin: 0 auto;
    }
    .haideitaoyiceng{
        height: 50px;
        overflow: hidden;
        background: #e5e5e5;
    }
    .zuihoudequanxuan{
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        padding-left: 5px;
        cursor: pointer;
       font-size: 12px;
    }
    .carbb{
        vertical-align: middle;
        margin-top: -2px;
        position: relative;
        display: inline-block;
        width: 15px;
        height: 15px;
        overflow: hidden;
    }
    .zuihouqx{
        position: relative;
        z-index: 1;
        float: left;
        width: 15px;
        height: 15px;
        background-position: 0 0;
        line-height: 200em;
        overflow: hidden;
        cursor: pointer;
        background: url("../assets/img/ys/600.png") no-repeat;
        background-position: 0 0;
    }
    .zuihouqx.active{
        background-position: 0 -20px;
    }
    .optis{
        float: left;
        line-height: 50px;
        height: 50px;
    }
    .optis a{
        margin-left: 25px;
        float: left;
        color: #3c3c3c;
        font-size: 12px;
    }
    .optis a:hover{
        text-decoration: underline;
           color: #f40;
    }
    .jieshujieshu{
        float: right;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 4;
        padding-left: 20px;
        background: #e5e5e5;
    }
    .jj1{
        height: 48px;
        color: #3c3c3c;
        cursor: pointer;
        font-size: 12px;
    }
    .jxuan{
        line-height: 50px;
        padding: 0 5px;
        color: #f40;
        font-weight: 700;
        font-size: 18px;
        font-family: tohoma,arial;
    }
    .jj2{
        height: 48px;
        color: #3c3c3c;
        margin-left: 12px;
        overflow: hidden;
    }
    .txts{
        line-height: 48px;
        color: #3c3c3c;
        float: left;
        font-size: 12px;
    }
    .j2s{
        color: #f40;
        font-weight: 400;
        font-size: 18px;
        line-height: 48px;
        font-family: Arial;
        vertical-align: middle;
        float: left;
    }
    .jsum{
        font-weight: 700;
        font-size: 22px;
        padding: 0 3px;
        color: #f40;
    }
    .jj3 a{
        display: inline-block;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-family: 'Lantinghei SC','Microsoft Yahei';
        font-size: 20px;
        background: #B0B0B0;
        color: #fff;
        border-left: 1px solid #e7e7e7;
        width: 119px;
        cursor: not-allowed;
        text-decoration: none;
    }
    .jj3 .zyjsl{
        display: inline-block;
        width: 120px;
        height: 50px;
        line-height: 50px;
        background: #f40;
        text-align: center;
        font-family: 'Lantinghei SC','Microsoft Yahei';
        font-size: 20px;
        border-radius: 2px;
        text-decoration: none;
        cursor: pointer;
        color: #fff;
    }
    .jj3 .zyjsl:hover{
            background: #f22d00;
    }
</style>
